<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>搜索</button>
    <ul></ul>
</body>
</html>
<script src="./zepto.js"></script>
<script src="./event.js"></script>
<script src="./touch.js"></script>
<script>
/* 分析
    1,需要给搜索按钮绑定一个tap点击事件
    2、事件触发
        a. 获取搜索框值txt 做个判断
         如果非法（没有数据）return
         如果有值，获取值
         
    3、把值存到本地存储中
        a 先获取本地存储的数据（是数组字符串）
        b 把数据（数组）渲染到ul 标签里面
        
    4. 把输入的值当作参数跳转到另外的页面上 */




    //绑定事件
    $("button").on("tap",function () {
    //获取搜索框的值
    var txt=$("input").val();
    //判断txt是否有数据
    if(!$.trim(txt)){
        //trim 去掉值的左右两边的空格
        return;
    }
    // 把值存到本地存储中
    // a 先获取本地存储的数据
     var ls =localStorage;
     //&& 找假：当本地存储中有数据的话 就将它转换为正常的数组或对象形式，
     //|| 找真：前面当有数据的话就执行前面的，没有的话就执行后面的取空
     var  arr = (ls.getItem("letaoHistory")&& JSON.parse(ls.getItem("letaoHistory")))||[];
     //把数据（数组）渲染到ul标签里面
       //不过要先判断数组中是否已经存在有相同的数据
       //循环遍历数组
       for (var i = 0; i < array.length; i++) {
           var element = arr[i];
           if(element==txt){
               //数据已经存在的话，将它删除，删除后就可以正常将新的数据添加到本地存储上了
               //删除索引是i的元素，删除1个
               arr.splice(i,1)

           }
           
       }
       //将新的数据添加到从本地获取出来的数组中
       
       //push 从尾部添加一个数据
       //unshift 从头部加一个数据
       arr.unshift(txt);

       //将新的数组存到本地存储中(要转换为字符串的形式哦)
       ls.setItem("letaoHistory",JSON.stringify(arr));
        
    })
    //把数据渲染到ul标签中

    init();
    function init(params) {
        var ls =localStorage;
        var arr = (ls.getItem("letaoHistory")&&JSON.parse(ls.getItem("letaoHistory")))||[];

            var str="";
        for (var i = 0; i < arr.length; i++) {
            var element = arr[i];
            //动态生产li标签
            str+="<li>"+element+"</li>"; 
        }
        //添加到ul标签上
        $("ul").html(str);
    }


    
    




</script>